// 动态数据
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchPostsIfNeeded, refreshData } from '../actions/count'
class Bar extends Component {
    render() {
        const { lists,number,fetchPostsIfNeeded, refreshData } = this.props

        return (
            <div>
                <div className="btn-group">
                    <button type="button" className="btn btn-default" onClick={() => fetchPostsIfNeeded()}>加载数据{number}</button>
                    <button type="button" className="btn btn-default" onClick={() => refreshData()}>清除数据</button>
                </div>
                <p></p>
                {lists.map((e, index) =>
                    <div className="well well-sm" key={index}><a href={e.url} target="_blank">{e.title}</a></div>
                )}
            </div>
        )
    }
}
//利用connect将组件与Redux绑定起来
export default connect(
  state => ({
    lists: state.update.data,
    number:state.update.number
  }),
  {fetchPostsIfNeeded, refreshData}
)(Bar)
